<template>
  <div class="beingExamContainer">
    <!-- 倒计时 -->
    <div class="header" >
      <view class="view-wrap">
        <i-icon class="clockIcon" type="clock" size="25" color="#2e8e9a" />
        <i-count-down
          class="countDown"
          :target="targetTime"
          :clear-timer="clearTimer"
        ></i-count-down>
      </view>
    </div>

    <!-- 题目内容 -->
    <div class="container">
      <div class="info">共{{stemTotal}}题，不定项选择</div>
    <view v-if="stem" v-for="(item, index) in stem" class="hd" :key="index">
    <!-- 题干 -->
    <view v-if="index" class="bd">{{index}}、 {{item.name}}</view>
    <radio-group class="radioGroup" v-if="item">
      <label
        class="radio"
        style="display: block;"
        v-for="(val,choose) in item.optionList"
        :key="val.id"
        @click="answerSelect(index, choose, item.optionList)"
      >
        <radio color="#2e8e9a" :value="val.content" :check="false"/>
        <span>{{val.content}}</span>
      </label>
    </radio-group>
    </view>
    </div>

    <!-- 提交操作 -->
    <view class="weui-flex" style="text-align:center;">
      <view class="weui-flex__item">
        <view class="placeholder" >
          <button class="weui-btn weui-btn_mini weui-btn_default btn" @click="submitPager">提交试卷</button>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
import HttpKit from '@/utils/http-kit'
import globalStore from "../../stores/global-store";
const EXAM_LIST_URL = 'http://127.0.0.1:8080/base-in-back-end'
export default {
  data () {
    return {
      stem:[{}], //题目数组
      answer:[],
      targetTime: 0,
      doTime:1800000,//设置做题时间40*1000ms
      clearTimer: false,
      tag:false, //控制显示解析答案
      stemTotal:0,//题数
      stemIndex:0,//题目下标
      nextText: "下一题",
      choseIndex: [0],//保存的答案下标
      isRight: false,//记录当前选项是否正确
      rightNum: 0,//题目正确数
      isChose: false,//记录是否选择
      questionList: [],//记录一张试卷的所有题目id
      paperId: '',
      isGreen: []
    }
  },
  beforeMount () {
    // 根据试卷id查询题目列表
    this.$fly.get(EXAM_LIST_URL + '/common/paper/' + this.paperId + '/topic')
      .then(e => {
        console.log(e)
        this.questionList = e.data.data.topics
        console.log('已选试卷的所有问题ID的列表' + this.questionList)
        this.stemTotal = this.questionList.length
          this.detail()
        console.log(this.stem)
      })
      .catch(err => {
      })

  },

  onLoad(options) {
    Object.assign(this.$data, this.$options.data())
    this.targetTime = new Date().getTime() + this.doTime
    this.paperId = options.paperId;
    globalStore.state.paperId = this.paperId;
    console.log('examList页面传来的试卷ID' + this.paperId)
  },
  onUnload() {
    this.clearTimer = true
  },

  methods: {
    detail() {
      for (let k = 0; k < this.questionList.length; k++) {
        HttpKit.get('/wx/stem/' + this.questionList[k])
          .then(res => {
            console.log(res)
            this.stem.push(res.data.data) // 题目回显
          })
          .catch(err => {
            wx.showToast({
              title:'加载错误',
              icon:'none',
              duration:2000
            })
          })
      }
    },

    //记录选中的答案下标
    answerSelect(index,choose,optionList){
      this.choseIndex[index-1] = choose;
      console.log(this.choseIndex)
      if(optionList[choose].isRight){
        this.isGreen[index-1] = true
      }else {
        this.isGreen[index-1] = false
      }
    },

    //提交事件
    submitPager(){
      console.log(this.choseIndex.length)
      console.log(this.questionList.length)
      // if(this.choseIndex.length == this.questionList.length){
      if(this.isGreen.length == this.questionList.length){
        globalStore.state.examingStem = this.stem
        for(let i = 0; i < this.isGreen.length; i++){
          if(this.isGreen[i]==true){
            this.rightNum++
          }
        }
                //传递数组预操作
                var rightArr = JSON.stringify(this.isGreen);
                var choseArr = JSON.stringify(this.choseIndex);
                var stemArr = JSON.stringify(this.stem);
                wx.navigateTo({
                  url:"/pages/endExam/main?right=" + this.rightNum + "&total=" + this.stemTotal + "&isGreen=" + rightArr +"&choseIndex=" +choseArr +"&stemArr=" + stemArr,
                })
      }
      else{
        wx.showToast({
          title:'没有完成',
          icon:'none',
          duration:2000
        })
      }
    },
  }
}

</script>

<style scoped >
.beingExamContainer {
  width: 100%;
  height: 100%;
  padding-left: 10px;
  margin: 0;
}
.header {
  position: fixed;
  height: 30px;
  width: 100%;
  top: 0;
  left: -10px;
  background-color: #f2f2f2;
  text-align: center;
}
.container {
  margin-top: 30px;
}
.container .bd {
  margin-top: 10px;
}
.info {
  margin: 3px auto;
}
.countDown {
  display: inline-block;
  line-height: 5px;
}

.placeholder btn {
  padding: 20px 40px;
}

.radioGroup {
  margin-left: 30px;
}
.radioGroup label {
  height: 35px;
  vertical-align: center;
}
</style>
